<template>
  <div>
      <div class="swiperWrap" v-if="result.basc.ad.length > 0">
          <swiper auto loop show-dots :aspect-ratio="622/1920" class="indexSwiper" dots-position="center" dots-class="swiperDoc">
              <swiper-item v-for="(item,index) in result.basc.ad" :key="index">
                  <img :src="item.photo" />
              </swiper-item>
          </swiper>
          <div class="swiperbg"></div>
      </div>
      <flexbox class="section">
          <flexbox-item v-for="item in result.class" :key="item.id">
              <router-link class="laksn" :to="{ path: '/cased', query:{ctype:item.id}}">
                  <div class="cirarc" :style="{'background-image':'url('+item.logo+')'}"> </div>
                  <div class="">{{item.name}}</div>
                  <p>{{item.en_name}}</p>
              </router-link>
          </flexbox-item>
      </flexbox>

      <div class="sectionAbout">
          <div class="sectionTitle">
              <div class="name">{{result.basc.nav&&result.basc.nav[0].name}}</div>
              <p class="sname">{{result.basc.nav&&result.basc.nav[0].en_name}}</p>
              <p class="dian"><span></span></p>
          </div>
          <div class="aboutText" v-html="result.basc.web_content"></div>
          <router-link class="mores" :to="{ path: '/abouts'}">MORE / 更多</router-link>
      </div>

      <div class="sectionCase" >
          <div class="sectionTitle">
              <div class="name">{{result.basc.nav&&result.basc.nav[2].name}}</div>
              <p class="sname">{{result.basc.nav&&result.basc.nav[2].en_name}}</p>
              <p class="dian"><span></span></p>
          </div>

            <case-list :lists="result.anli"></case-list>
            <router-link class="mores" :to="{ path: '/cased'}">MORE / 更多</router-link>
      </div>

      <div class="sectionNews">
          <div class="newsHead">
              <img src="../assets/indexNews.jpg" alt="" />
              <div class="content">
                  <div class="sectionTitle">
                      <div class="name">{{result.basc.nav&&result.basc.nav[1].name}}</div>
                      <p class="sname">{{result.basc.nav&&result.basc.nav[1].en_name}}</p>
                      <p class="dian"><span></span></p>
                  </div>
              </div>
          </div>

          <div class="indexNewsList">
              <news-list :lists="result.news"></news-list>
              <router-link class="mores" :to="{ path: '/news'}">MORE / 更多</router-link>
          </div>
      </div>


      <div class="sectionService">
          <div class="sectionTitle">
              <div class="name">服务品牌客户</div>
              <p class="sname">Service brand customers</p>
              <p class="dian"><span></span></p>
          </div>

          <div class="serviceWrap">
              <flexbox wrap="wrap" :gutter="0" >
                  <flexbox-item :span="1/3" v-for="(item,index) in result.friend" :key="index">
                      <div class="serviceItem" ><img :src="item.photo" /></div>
                  </flexbox-item>
              </flexbox>
          </div>
      </div>

      <footers :basc="result.basc"></footers>
  </div>
</template>
<script>
import { Swiper, SwiperItem, Flexbox, FlexboxItem } from "vux"
import caseList from './CaseList'
import newsList from './NewsList'
import Footers from './Footer'
export default {
  name: "Index",
  components:{
      Swiper,SwiperItem,Flexbox,FlexboxItem,
      caseList,newsList,Footers

  },
  data: () => ({
      result:{
          basc:{ad:[]}
      },
  }),
  created(){
      this.Query('index').then(result => {
          console.log(result);
          this.result = result;
      }).catch(os =>{
         alert("数据出错啦");
      });
  }
}
</script>
<style lang="less" >

</style>
